//tab选项卡

const ul = document.querySelector('.tab-nav ul')
const items = document.querySelectorAll('.tab-content .item1')
ul.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    // 排他思想 ，先移除原来的active  
    document.querySelector('.tab-nav .active').classList.remove('active')
    //当前元素添加 active  是 e.target
    e.target.classList.add('active')
    e.preventDefault();

    // 下面大盒子模块
    const i = +e.target.dataset.id
    console.log(i);
    // 先移除原来的active
    document.querySelector('.tab-content .active').classList.remove('active')
    // 对应的大盒子 添加 active 
    items[i].classList.add('active')
  }
})

// 获取技能列表项的DOM元素
let skill1 = document.getElementById("skill1");
let skill2 = document.getElementById("skill2");
let skill3 = document.getElementById("skill3");
let skill4 = document.getElementById("skill4");
let skill5 = document.getElementById("skill5");
let skill6 = document.getElementById("skill6");
let skill7 = document.getElementById("skill7");
let skill8 = document.getElementById("skill8");
let skill9 = document.getElementById("skill9");

// 处理点击事件
skill1.addEventListener("click", function () {
  // 更新技能介绍图片
  document.getElementById("introImg").src = "./images/dy1.png";


});
skill2.addEventListener("click", function () {
  document.getElementById("introImg").src = "./images/dy2.png";

});
skill3.addEventListener("click", function () {
  document.getElementById("introImg").src = "./images/dy3.png";
});
skill4.addEventListener("click", function () {
  document.getElementById("introImg").src = "./images/dy4.png";
});
skill5.addEventListener("click", function () {
  document.getElementById("introImg").src = "./images/dy5.png";
});
skill6.addEventListener("click", function () {
  document.getElementById("introImg").src = "./images/dy6.png";
});
skill7.addEventListener("click", function () {
  document.getElementById("introImg").src = "./images/dy7.png";
});
skill8.addEventListener("click", function () {
  document.getElementById("introImg").src = "./images/dy8.png";
});
skill9.addEventListener("click", function () {
  document.getElementById("introImg").src = "./images/dy9.png";
});
let lis = document.querySelectorAll('.skills li');

lis.forEach(function (li) {
  li.addEventListener('click', function () {
    let image = li.querySelector('img');
    image.style.border = '2px solid orange'
    image.style.transform = 'scale(1.2)'; // 将图片放大1.2倍
    image.style.transition = 'transform 0.3s'; // 添加过渡效果
  });

  li.addEventListener('mouseout', function () {
    let image = li.querySelector('img');
    image.style.border = '2px solid skyblue'
    image.style.transform = 'scale(1)'; // 恢复原始尺寸
    image.style.transition = 'transform 0.3s'; // 添加过渡效果
  });
});
//评论区
const tx = document.querySelector('#tx')
const total = document.querySelector('.total')
const item = document.querySelector('.item')
const text = document.querySelector('.text')
// 1. 当我们文本域获得了焦点，就让 total 显示出来
tx.addEventListener('focus', function () {
  total.style.opacity = 1
})
// 2. 当我们文本域失去了焦点，就让 total 隐藏出来
tx.addEventListener('blur', function () {
  total.style.opacity = 0
})
// 3. 检测用户输入
tx.addEventListener('input', function () {
  // console.log(tx.value.length) 得到输入的长度
  total.innerHTML = `${tx.value.length}/200字`
})

// 4. 按下回车发布评论
tx.addEventListener('keyup', function (e) {
  // 只有按下的是回车键，才会触发
  if (e.key === 'Enter') {
    // 如果用户输入的不为空就显示和打印
    if (tx.value.trim() !== '') {
      // console.log(11)
      item.style.display = 'block'
      // console.log(tx.value) // 用户输入的内容
      text.innerHTML = tx.value
    }
    //使用ajax获取当前时间
    let timeElement = document.querySelector('.info .time');

    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://worldtimeapi.org/api/ip', false);//改成同步请求
    xhr.send();

    if (xhr.status === 200) {
      let response = JSON.parse(xhr.responseText);
      console.log(response);
      let datetime = new Date(response["datetime"]);
      console.log(datetime)
      let year = datetime.getFullYear();
      //后面的slice都是确保几位小数
      let month = ("0" + (datetime.getMonth() + 1)).slice(-2);
      let day = ("0" + datetime.getDate()).slice(-2);
      let hour = ("0" + datetime.getHours()).slice(-2);
      let minute = ("0" + datetime.getMinutes()).slice(-2);
      let second = ("0" + datetime.getSeconds()).slice(-2);
      let formattedTime = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
      timeElement.innerHTML = formattedTime;
    }

    // 等我们按下回车，结束，清空文本域
    tx.value = ''
    // 按下回车之后，就要把 字符统计 复原
    total.innerHTML = '0/200字'
  }
})

